<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-25 21:18:06
 * @LastEditTime: 2023-05-18 18:00:28
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\Iframe\index.vue
 * Copyright 版权声明
-->
<template>
  <iframe class="loadIframe" :src="target" frameborder="0"></iframe>
</template>

<script>
import { mapGetters } from 'vuex'
import $ from 'jquery'

export default {
  name: 'InlineIframe',
  computed: {
    ...mapGetters([
      'permissionRoutersMap'
    ]),
    // 跳转目标地址
    target: function() {
      const { name } = this.$route
      const routeInfo = this.permissionRoutersMap[name] || {
        fullpath: ''
      }
      const target = decodeURIComponent(this.getUrlParamsByName('target', routeInfo.fullpath))
      return target
    }
  },
  components: {
  },
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    // 获取本路由是新窗口打开还是本窗口打开
    const isOpen = (typeof this.$route.meta.isOpen !== 'undefined') ? this.$route.meta.isOpen : false
    // 如果是新窗口打开，就进行跳转 --- 后期可在此处进行链接拦截让用户二次确认是否跳转
    if (isOpen === true) {
      location.href = this.target
      return
    }
    // 设置iframe高度
    const appMainHeight = $('.app-main').height()
    $('.loadIframe').css({
      height: appMainHeight
    })
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    getUrlParamsByName(name, url) {
      // \b 边界
      // ?<= 向后匹配
      // 字符串转成正则表达式，其中的'\b'类型的特殊字符要多加一个'\'
      const reg = new RegExp(`(?<=\\b${name}=)[^&]*`)
      const str = url || location.search
      const target = str.match(reg)
      if (target) {
        return target[0]
      }
      return
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.loadIframe{
  width: 100%;
}
</style>
